<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <div th:replace="common/common::html"></div>
    <meta charset="UTF-8">
    <title th:text="#{user.info}">Title</title>
    <script th:inline="javascript">
        var _gridWidth;
        var _gridHeight;
        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width()-12;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
            _gridHeight = $(document).height()-32-60; /* -32 顶部主菜单高度，   -90 查询条件高度*/
            $("body").css("height",_gridHeight+"px")
        }
        $(function () {
            resizePageSize();
            var _columnWidth = _gridWidth/4;
            $("#flexigrid-id").flexigrid({
                width : _gridWidth,
                height : _gridHeight,
                url : /*[[@{getDepartmentInfoListByPage}]]*/"",
                dataType : 'json',
                colModel : [
                    {display : 'depUuid',name : 'depUuid',width : 150,sortable : false,align : 'center',hide : 'true'},
                    {display : /*[[#{department.name}]]*/"",name : 'branchName',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{department.remark}]]*/"",name : 'remark',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{department.organ}]]*/"",name : 'organName',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{common.operation}]]*/"",name : 'depUuid',width : _columnWidth, sortable : true,align : 'center',process:function (y, _trid, _row) {
                            var htmlContent = '<a href="#" onclick="deleteDepartment( \''+ y + '\')"><i class="glyphicon glyphicon-minus" style="color: #2f332a"></i></a>';
                            return htmlContent;
                        }}
                ],
                resizable : false, //resizable table是否可伸缩
                useRp : true,
                usepager : true, //是否分页
                autoload : false, //自动加载，即第一次发起ajax请求
                hideOnSubmit : true, //是否在回调时显示遮盖
                showcheckbox : true, //是否显示多选框
                //rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
                rowbinddata : true

            });
            queryBtn();
            $("#query-btn-id").click(function (event) {
                event.stopPropagation();//防止冒泡
                queryBtn();
            })
            $("#confire-department-del-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{department.delete.tip.titile}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var depUuid=$("#confire-department-del-id").attr("depUuid");
                            $.ajax({
                                type: 'post',
                                async: false,
                                dataType: 'json',
                                url: /*[[@{deleteDepartmentById}]]*/'',
                                data: [{name: "depUuid", value: depUuid}],
                                success: function (data) {
                                    message(data.msg);
                                    $("#confire-department-del-id").dialog( "close" );
                                    queryBtn();
                                },
                                error: function (msg) {
                                    message(/*[[#{common.error}]]*/'' );
                                }
                            });

                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            $("#allocate-btn-id").click(function (event) {
                event.stopPropagation();
                // $("#allocate-dialog-id").dialog("open");
                allocateDepartment();
            })

            $("#allocate-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{user.role.allocate}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var userUuid=$("#allocate-dialog-id").attr("userUUid")
                            var roleUuids=[];
                            var ztreeObj = $.fn.zTree.getZTreeObj("allocate-user-ztree");
                            var checkNodes = ztreeObj.getCheckedNodes(true);
                            var menuArray = [];
                            $(checkNodes).each(function (index,item) {
                                roleUuids.push(item.id);
                            });
                            $.ajax({
                                    type: 'post',
                                    async: false,
                                    dataType : 'json',
                                    url: /*[[@{saveRoleByUserId}]]*/'',
                                    data: [
                                        {name:"userUuid",value:userUuid},
                                        {name:"roleUuids",value:roleUuids}
                                    ],
                                    success: function (data) {
                                        message(data.msg);
                                        $("#allocate-dialog-id").dialog( "close" );
                                    },
                                    error: function(msg){
                                        message(/*[[#{common.error}]]*/'');
                                    }
                                }
                            );

                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            })
            /*绑定部门*/
            $('#bound-last-department').click(function (event){
                /*选中数据*/
                var ids = $("#flexigrid-id").getFlexigridiAttrByIndex(2);
                /*遍历数据*/
                ids.forEach(id=>{
                    bound(id);
                })
            })

            /*解绑定部门*/
            $('#clear-bound-department').click(function (event){
                /*选中数据*/
                var ids = $("#flexigrid-id").getFlexigridiAttrByIndex(2);
                /*遍历数据*/
                ids.forEach(id=>{
                    clearBound(id);
                })
            })



        });//ready
        /*绑定部门*/
        function bound(date) {
            $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{updatePtDepartmentBelongCenter}]]*/'',
                    data:{branchName:date},
                    success: function (data) {
                        alert(data.value);
                        $("#flexigrid-id").flexOptions({
                        }).flexReload();
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                }
            );
        }
        /*解除绑定*/
        function clearBound(date) {
            $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{clearBoundPtDepartmentByBranchName}]]*/'',
                    data:{branchName:date},
                    success: function (data) {
                        alert(data.value);
                        $("#flexigrid-id").flexOptions({
                        }).flexReload();
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                }
            );
        }

        // 用户查询
        function queryBtn() {//用户表格的查询
            var searchDepartmentName = $("#search-department-name-id").val();
            $("#flexigrid-id").flexOptions({
                extParam:[
                    {name:"searchDepartmentName",value:searchDepartmentName}
                ]
            }).flexReload();

        }

        function deleteDepartment(depUuid) {
            $("#confire-department-del-id").attr("depUuid",depUuid);
            $("#confire-department-del-id").dialog('open');
        }

        var allocateSetting = {
            check: {//多选框
                enable: true
            },
            data: {//数据
                simpleData: {
                    enable: true
                }
            }
        };

        function allocateZtree() {
            //获取Uuid
            var ids = $("#flexigrid-id").getFlexigridiAttrByIndex(0);
            if(ids.length !== 1){
                message(/*[[#{common.select.one}]]*/'');
                return;
            }

            $("#allocate-dialog-id").attr("userUUid",ids);
            //
            $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{getRoleZtreeListByUserId}]]*/'',
                    data: [{name:"userUuid",value:ids}],
                    success: function (data) {

                        $.fn.zTree.init($("#allocate-user-ztree"), allocateSetting, data);
                        $("#allocate-dialog-id").dialog('open');
                    },
                    error: function(msg){

                        message(/*[[#{common.error}]]*/'');
                    }
                }
            );
        }
    </script>
</head>
<body>
<div>
    <span th:text="#{department.manage.info}"></span>
    <input type="text" id="search-department-name-id" th:placeholder="#{department.name}">
    <a href="#" id="query-btn-id" class="navbar-btn">
        <i class="glyphicon glyphicon-zoom-in"></i>
        <span th:text="#{common.query}"></span>
    </a>
    <!--绑定新部门-->
    <a href="#" id="bound-last-department" class="navbar-btn">
        <i class="glyphicon glyphicon-zoom-in"></i>
        <span th:text="#{common.bound.last}"></span>
    </a>
    <!--解除绑定子国电部门-->
    <a href="#" id="clear-bound-department" class="navbar-btn">
        <i class="glyphicon glyphicon-zoom-in"></i>
        <span th:text="#{clear-bound-department}"></span>
    </a>


    <a href="#" id="allocate-btn-id" class="navbar-btn">
        <i class="glyphicon glyphicon-tower"></i>
        <span th:text="#{department.organ.allocate}"></span>
    </a>

    <div>

</div>
</div>

<table id="flexigrid-id"></table>
<div id="confire-department-del-id" style="display: none">
    <span th:text="#{department.delete.tip.info}"></span>
</div>

<div id="allocate-dialog-id" style="display: none">
    <ul id="allocate-user-ztree" class="ztree">
    </ul>
</div>



</body>
</html>